<template>
  <rx-layout style="padding: 10px;">
    <template #middle>
      <rx-fit v-model="fitSearch">
        <template #head>
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <div class="table-operator">
              <a-button v-if="removeEnable && selectedRowKeys.length > 0" type="danger" @click="delByIds(selectedRowKeys)">
                <template #icon>
                  <DeleteOutlined />
                </template>
                {{$ti18('rxList.delBtn','删除')}}
              </a-button>
            </div>
            <span class="search-btn" @click.stop="searchshow" @mousedown.stop><SearchOutlined/>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
          </div>
        </template>
        <template #search>
          <a-form :layout="colLayout">
            <a-row :gutter="24">
              <a-col :span="colSpan">
                <a-form-item :label="i18n('form.sender','发送人')">
                  <a-input :placeholder="i18n('form.sender','发送人','input')" v-model:value="urlConfig.queryParam.Q_SENDER__S_LK"/>
                </a-form-item>
              </a-col>
              <a-col :span="colSpan">
                <a-form-item :label="i18n('timeFrom','消息创建时间 从')">
                  <a-date-picker
                      style="width: 100%;"
                      :placeholder="i18n('createTime','请输入任务创建时间')"
                      v-model:value="urlConfig.queryParam['Q_CREATE_TIME__D_GT']"
                      format="YYYY-MM-DD"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="colSpan">
                <a-form-item :label="i18n('to','至')">
                  <a-date-picker
                      style="width: 100%;"
                      :placeholder="i18n('createTime','请输入任务创建时间')"
                      v-model:value="urlConfig.queryParam['Q_CREATE_TIME__D_LT']"
                      format="YYYY-MM-DD"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div class="list-search-toolbar">
            <a-button type="primary" @click="search">
              <SearchOutlined/>
              {{ $ti18('rxList.searchBtn', '查询') }}
            </a-button>
            <a-button style="margin-left: 4px" @click="resetSearch">
              <RedoOutlined />
              {{ $ti18('rxList.resetBtn', '重置') }}
            </a-button>
          </div>
        </template>
        <template #middle>
          <rx-grid ref="table"
                   :hasPage="true"
                   :urlConfig="urlConfig"
                   :selectConfig="selectConfig"
                   url="/api-portal/portal/core/infInnerMsg/queryGroupMsg"
                   field="msgId"
                   :columns="columns"
          >
            <template #appId="{row}">
              {{allApps[row.appId]?$i18(allApps[row.appId].appName,'应用名称'):$ti18('rxList.noAppName','无')}}
            </template>
            <template #isRead="{row}">
              <a-tag
                  :color="row.isRead=='yes' ? 'green' : 'red'">
                <span v-if="row.isRead=='yes'">{{i18n('read','已读')}}</span>
                <span v-else>{{i18n('unread','未读')}}</span>
              </a-tag>
            </template>
            <template #content="{row}">
              <p v-html="row.content"></p>
            </template>
            <template #action="{ row }">
              <RxGridAction :size="2">
                <div @click.stop="readMessage(row)">{{i18n('list.view','查看')}}</div>
                <div v-if="removeEnable" @click="delByIds([row])">{{$ti18('rxList.delBtn','删除')}}</div>
              </RxGridAction>
            </template>
          </rx-grid>
          <div>
            <a-drawer
                :title="i18n('list.viewMsg','查看消息')"
                placement="right"
                :closable="false"
                :open="visible"
                @close="onClose"
                :width="600"
            >
              <ReadMessage :infInnerMsg="infInnerMsg"></ReadMessage>
            </a-drawer>
          </div>
        </template>
      </rx-fit>
    </template>
  </rx-layout>
</template>

<script>
  import InfInnerMsgApi from '@/common/api/portal/infInnerMsg'
  import InfInnerMsgEdit from './InfInnerMsgEdit.vue'
  import ReadMessage from './ReadMessage.vue'
  import {BaseList, Util} from '@lowcode/jpaas-base-lib';
  import { mapState} from 'pinia';
  import useMain from '@/stores/useMain';

  export default {
    name: 'InfInnerMsgList',
    mixins: [BaseList],
    components: {
      ReadMessage
    },
    computed: {
      ...mapState(useMain,['menus']),
      allApps(){
        let json = {};
        this.menus.forEach(item=>{
          json[item.id]={appName:item.title};
        });
        return json;
      }
    },
    data() {
      return {
        urlConfig: {
          ajaxType: 'post',
          contentType: 'json',
          queryParam: {},
          dataField: 'result.data',
          totalField: 'result.totalCount'
        },
        selectConfig: {
          type: 'checkbox',
        },
        columns: [
          {title: this.i18n('form.msgTitle','标题'), field: 'msgTitle', minWidth: 160},
          {title: this.i18n('form.sender','发送人'), field: 'sender', minWidth: 100},
          {title: this.i18n('form.msgClassify','消息分类'), field: 'category', minWidth: 130},
          {title: this.i18n('form.app','所属应用'), field: 'appId', minWidth: 140,slots: {default: 'appId'}},
            {title: this.i18n('form.status','状态'), field: 'isRead', minWidth: 60, slots: {default: 'isRead'}},
            {title: this.$ti18('rxForm.createTime','创建时间'), field: 'createTime', minWidth: 120},
          {title: this.$ti18('rxList.action','操作'), minWidth: 100, field: 'action', slots: {default: 'action'}}
        ],
        component: InfInnerMsgEdit,
        comment: this.i18n('list.shortMsg','内部短消息'),
        widthHeight: ['800px', '600px'],
        visible: false,
        infInnerMsg: {}
      }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "infInnerMsg", key);
        },
      delByIds(records) {
        var recIds = [];
        for (var i = 0; i < records.length; i++) {
          recIds.push(records[i].recId);
        }
        InfInnerMsgApi.delByRecIds({recIds: recIds.join(',')}).then(res => {
          this.$refs.table.loadData()
        });
        return;
      },
      readMessage(record) {
        if (record.isRead != 'yes') {
          InfInnerMsgApi.readMessage({msgId: record.msgId}).then(res => {
            this.$refs.table.loadData()
          });
        }
        this.visible = true;
        this.infInnerMsg = record;
      },
      onClose() {
        this.visible = false;
      },
    }
  }
</script>
<style scoped>

</style>

